<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户主页</title>
</head>
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户首页</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--导入头部-->
<div id="head" th:include="common/header"></div>
<!--轮播图-->
<div class="layui-carousel" id="test1" style="margin-left: auto;margin-right: auto;height: 500px">
    <div carousel-item>
        <div><img alt="" th:src="@{/images/lbpicone.png}"></div>
        <div><img alt="" th:src="@{/images/lbpictwo.png}"></div>
        <div><img alt="" th:src="@{/images/lbpicthree.png}"></div>
        <div><img alt="" th:src="@{/images/lbpicfour.png}"></div>
        <div><img alt="" th:src="@{/images/lbpicfive.png}"></div>
    </div>
</div>
<div style="width: 1350px;margin-right: auto;margin-left: auto;margin-top: 40px">
    <i class="layui-icon layui-icon-tree" style="font-size: 60px;color: #00d249"></i>
    <p style="margin-top: 20px;font-size: 30px;float: right;margin-right: 1000px">旅游城市精选(贵州区)</p>
    <div class="fengexian1" style="width: 1350px;height: 1px;background-color: black;margin-left: auto;margin-right:auto "></div>
</div>
<div class="container" style="width: 1350px;margin-left: auto;margin-right: auto;margin-top: 20px">
    <div class="container-item" style="width: 300px;height: 400px;float: left">
        <a th:href="@{/index/toCityDeatil(cityname=${'贵阳'})}" style="color: black">
            <img alt="" th:src="@{/images/guiyang.png}">
            <h2 style="margin-left: 60px">美丽筑城--贵阳</h2>
        </a>
    </div>
    <div class="container-item" style="width: 300px;height: 400px;float: left;margin-left: 50px;margin-right: 50px">
        <a  th:href="@{/index/toCityDeatil(cityname=${'安顺'})}" style="color: black">
            <img alt="" th:src="@{/images/anshun.png}">
            <h2 style="margin-left: 60px">西部之秀--安顺</h2>
        </a>
    </div>
    <div class="container-item" style="width: 300px;height: 400px;float: right">
        <a  th:href="@{/index/toCityDeatil(cityname=${'六盘水'})}" style="color: black">
            <img alt="" th:src="@{/images/liupanshui.png}">
            <h2 style="margin-left: 60px">中国凉都--六盘水</h2>
        </a>
    </div>
    <div class="container-item" style="width: 300px;height: 400px;float: right;margin-right: 50px">
        <a  th:href="@{/index/toCityDeatil(cityname=${'遵义'})}" style="color: black">
            <img alt="" th:src="@{/images/zunyi.png}">
            <h2 style="margin-left: 60px">红色城市--遵义</h2>
        </a>
    </div>
</div>
<div style="width: 1350px;margin-right: auto;margin-left: auto;margin-top: 40px">
    <i class="layui-icon layui-icon-fire" style="font-size: 60px;color: #f93c3a"></i>
    <p style="margin-top: 30px;font-size: 20px;float: right;margin-right: 1120px">美丽筑城-贵阳景点</p>
    <div class="fengexian1" style="width: 1350px;height: 1px;background-color: black;margin-left: auto;margin-right:auto "></div>
</div>
<div class="container" style="width: 1350px;margin-left: auto;margin-right: auto;margin-top: 10px">
    <div class="container-item" style="width: 300px;height: 400px;float: left">
        <a th:href="@{/index/toSSpotDeatil(sspotname=${'多彩贵州城极地海洋世界'})}" style="color: black">
            <img alt=""  width="300px" th:src="@{https://dimg08.c-ctrip.com/images/100h1f000001grut0E785_C_220_140.jpg}">
            <h2 style="margin-left: 60px">多彩贵州海洋世界</h2>
        </a>
    </div>
    <div class="container-item" style="width: 300px;height: 400px;float: left;margin-left: 50px;margin-right: 50px">
        <a th:href="@{/index/toSSpotDeatil(sspotname=${'青岩古镇'})}" style="color: black">
            <img alt="" width="300px" th:src="@{https://dimg03.c-ctrip.com/images/100q1f000001grix37A49_C_220_140.jpg}">
            <h2 style="margin-left: 90px">青岩古镇</h2>
        </a>
    </div>
    <div class="container-item" style="width: 300px;height: 400px;float: right">
        <a th:href="@{/index/toSSpotDeatil(sspotname=${'黔灵山公园'})}" style="color: black">
            <img alt="" width="300px" th:src="@{https://dimg02.c-ctrip.com/images/fd/tg/g3/M0A/37/5F/CggYGlXDMK-AaW6wABB0H_itAHo770_C_220_140.jpg}">
            <h2 style="margin-left: 110px">黔灵山公园</h2>
        </a>
    </div>
    <div class="container-item" style="width: 300px;height: 400px;float: right;margin-right: 50px">
        <a th:href="@{/index/toSSpotDeatil(sspotname=${'甲秀楼'})}" style="color: black">
            <img alt="" width="300px" th:src="@{https://dimg07.c-ctrip.com/images/fd/tg/g6/M09/AB/F6/CggYtFchZ3yAPzYwACvQa0Y3qN4487_C_220_140.jpg}">
            <h2 style="margin-left: 90px">甲秀楼</h2>
        </a>
    </div>
</div>

<div id="foot" th:include="common/footer"></div>
</body>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
    /*copy的轮播图js代码 功能实现，来自官方文档*/
    layui.use('carousel', function() {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '80%' //设置容器宽度
            ,height:'350px'
            , arrow: 'always' //始终显示箭头
            , autoplay: 'ture'
            //,anim: 'updown' //切换动画方式
        });
    });

</script>
</html>